<template>
  <el-container>
    <el-header height="5%"></el-header>
    <el-main>
      <div>
        <el-form label-position="right" label-width="80px" :model="formData" size="mini" :inline="true" ref="formData">
          <el-form-item label="ID">
            <el-input v-model="formData.id"></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="formData.rptCode"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="formData.rptName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">查询</el-button>
            <el-button type="primary" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="primary" size="mini" icon="el-icon-plus">新增</el-button>
        <el-button type="primary" size="mini" icon="el-icon-download">导出</el-button>
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="roleId"
            label="ID"
            width="80">
          </el-table-column>
          <el-table-column
            prop="roleCode"
            label="编号"
            width="300">
          </el-table-column>
          <el-table-column
            prop="roleName"
            label="名称"
            width="300">
          </el-table-column>
          <el-table-column
            prop="roleType"
            label="类型"
            width="120">
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <el-footer height="15%">
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNo"
          :page-sizes="pageInfo.pageSizeArr"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, next, jumper"
          :total="pageInfo.total">
        </el-pagination>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
  import { queryList } from '@/api/role'
  import { notifyError } from '@/utils/message'

  export default {
    name: 'customRptInfoList',
    data() {
      return {
        tableData: [],
        formData: {},
        pageInfo: {
          pageNo: 1,
          pageSize: 20,
          pageSizeArr: [10, 20, 50, 100, 200],
          total: 0
        }
      }
    },
    mounted: function() {
      this.submitForm()
    },
    methods: {
      async submitForm() {
        try {
          const { data } = await queryList(this.pageInfo.pageNo, this.pageInfo.pageSize, this.formData)
          if (data) {
            const { records, current } = data
            this.tableData = records
            this.pageInfo.pageNo = current
            this.pageInfo.total = this.tableData.length
          }
        } catch (e) {

        }
      },
      handleSizeChange() {
        this.pageInfo.pageNo = 1
        this.submitForm()
      },
      handleCurrentChange() {
        this.submitForm()
      },
      resetForm() {
        this.formData = {}
      }
    }
  }
</script>

<style scoped>

</style>
